import React from 'react';
import { Form, Input, Select, Checkbox } from 'antd';
import useControlOptions from '../../hooks/useControlOptions';
import { RowProps } from './Row';

const data = [
  { label: 'table', value: 'table' },
  { label: 'thead', value: 'table-header-group' },
  { label: 'tbody', value: 'table-row-group' },
  { label: 'tr', value: 'table-row' }
];

const alignData = [
  { label: '顶部', value: 'top' },
  { label: '居中', value: 'middle' },
  { label: '底部', value: 'bottom' }
];

const justifyData = [
  { label: '起始', value: 'start' },
  { label: '结尾', value: 'end' },
  { label: '居中', value: 'center' },
  { label: '空白等分', value: 'space-around' },
  { label: '两端对齐', value: 'space-between' }
];

export default () => {
  const { options, id, changeControlProps } = useControlOptions<RowProps>('rowProps');

  function onChange(k: string, v: any) {
    changeControlProps('rowProps', {
      ...options.rowProps,
      [k]: v
    }, true);
  }

  return (
    <>
      <Form.Item label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
        <Input readOnly defaultValue={id} />
      </Form.Item>

      <Form.Item label='竖轴对齐'>
        <Select
          allowClear
          value={options.rowProps?.align}
          onChange={e => onChange('align', e)}>
          {alignData.map(item => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item label='横轴对齐'>
        <Select
          allowClear
          value={options.rowProps?.justify}
          onChange={e => onChange('justify', e)}>
          {justifyData.map(item => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item label='内置样式'>
        <Select
          allowClear
          value={options.rowProps?.tableStyle}
          onChange={e => onChange('tableStyle', e)}>
          {data.map(item => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      {options.rowProps?.tableStyle === 'table' && (
        <Form.Item className='antd-form-item-row' label='分页符'>
          <Checkbox
            onChange={e => onChange('pageBreakAfter', e.target.checked)}
            checked={typeof options.rowProps?.pageBreakAfter === 'boolean' ? options.rowProps?.pageBreakAfter : true} />
        </Form.Item>
      )}

      <Form.Item label='自定义样式'>
        <Input
          value={options.rowProps?.rowStyle}
          onChange={e => onChange('rowStyle', e.target.value)} />
      </Form.Item>

      <Form.Item className='antd-form-item-row' label='在每一页表格前面打印'>
        <Checkbox onChange={(e) => onChange('printOnEveryPage', e.target.checked)} checked={options.rowProps?.printOnEveryPage} />
      </Form.Item>

    </>
  );
};